<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-17 16:47:40
 * @LastEditors: william
 * @LastEditTime: 2025-04-01 14:58:50
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="$t('public.detail')"
    width="850px"
    :before-close="handleClose"
  >
    <el-descriptions
      v-loading="viewLoading"
      :column="2"
      border
      :label-width="200"
    >
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.vehicleId') }}</template>
        {{ formData.id }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.licensePlate') }}</template>
        {{ formData.vehiclePlate }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.driver') }}</template>
        {{ formData.driverName }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('public.createTime') }}</template>
        {{ formData.createTime }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.driverGender') }}</template>
        <span>{{
          g_options.getOptionText(
            g_options.genderOptions,
            formData.driverSex,
            '--'
          )
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label
          >{{ $t('fleet.age') }}({{ $t('fleet.yearsOld') }})</template
        >
        {{ formData.driverAge }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.contactPhone') }}</template>
        {{ formData.driverPhone }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.creator') }}</template>
        {{ formData.createBy }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.loadCapacity') }}</template>
        {{ formData.seatCount }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.vehicleType') }}</template>
        <span>{{
          g_options.getOptionText(
            g_options.vehicleTypeOptions,
            formData.vehicleType,
            '--'
          )
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template #label>{{ $t('fleet.vehicleCost') }}</template>
        <div class="cost-inline">
          {{ formData.costPerDay }}{{ $t('fleet.yuan') }}/{{ $t('public.sky') }}
          <span class="icon">|</span>
          {{ formData.costPerKm }}{{ $t('fleet.yuan') }}/{{
            $t('fleet.kilometer')
          }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.vehicleStatus') }}</template>
        <span
          class="dot-status"
          :class="
            g_options.getOptionText(
              g_options.vehicleStatusOptions,
              formData.status,
              '--',
              'class'
            )
          "
          >{{
            g_options.getOptionText(
              g_options.vehicleStatusOptions,
              formData.status,
              '--'
            )
          }}</span
        >
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.region') }}</template>
        {{ g_utils.getRegionName(formData.regionCode) }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.driverIdCard') }}</template>
        {{ formData.driverIdNumber }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('public.email') }}</template>
        {{ formData.driverEmail }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.emergencyContact') }}</template>
        {{ formData.emergencyContact }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.emergencyContactPhone') }}</template>
        {{ formData.emergencyContactPhone }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('fleet.vehicleOtherInfoRemark') }}</template>
        {{ formData.note }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="detail-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.close')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})

const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const viewLoading = ref(false)
const formData = ref({})

onMounted(() => {
  getFormData()
})

const getFormData = () => {
  viewLoading.value = true
  g_api.fleet
    .apiVehicleDetail({ id: props.id })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        formData.value = data
      }
    })
    .finally(_ => {
      viewLoading.value = false
    })
}

const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style scoped lang="scss">
.cost-inline {
  .icon {
    margin: 0 20px;
  }
}
</style>
